<!--
  * 时间：2024/11/8
  * 作者：刘岩
  * 描述：首页
-->
<template>
  <div class="home">
    <banner></banner>
    <div class="home-content">
      <div class="container">
        <div class="title">
          <h3>
            <span>关于博筑</span>
          </h3>
          <p>博筑智能是一家集制作、研发、设计、创意为一体的展厅服务</p>
        </div>
        <div class="box">
          <img class="box-img" src="@/assets/home/case-1.jpg" alt="">
          <div class="text">
            <h4>天津博筑智能科技有限公司</h4>
            <div class="content">
              天津博筑智能科技有限公司成立于2019年，专注于文博行业的智慧化解决方案。公司集软硬件开发、音视频讲解设备、安防系统、导览系统设计与实施于一体。为客户
              提供全面的数字化、智慧化解决方案。其产品广泛应用于博物馆、科技馆、纪念馆、图书馆等多种场馆。涵盖展馆智慧化管理、文物保护、导览讲解和观众服务。
            </div>
<!--            <a class="btn">查看更多</a>-->
          </div>
        </div>
      </div>
<!--      <div class="container">-->
<!--        <div class="title">-->
<!--          <h3>-->
<!--            <span>博物馆展柜产品</span>-->
<!--          </h3>-->
<!--          <p>博筑智能是一家集制作、研发、设计、创意为一体的展厅服务</p>-->
<!--        </div>-->
<!--        <div class="box-two">-->
<!--          <div class="btn-box">-->
<!--            <a>金属屏柜</a>-->
<!--            <a>金属独立柜</a>-->
<!--            <a>金属壁龛柜</a>-->
<!--            <a>金属通体墙柜</a>-->
<!--            <a>金属特制异形柜</a>-->
<!--          </div>-->
<!--          <div class="car-box">-->
<!--            <img v-for="item in 10" src="@/assets/home/case-1.jpg" :key="item" alt="">-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="container">
        <div class="title">
          <h3>
            <span>智慧博物馆</span>
          </h3>
        </div>
        <div class="box">
          <img class="box-img box-big-img" src="../../assets/home/ct.png" alt="">
          <div class="text">
            <h4>智慧博物馆</h4>
            <div class="content content-box">
<!--              <p>票务系统</p>-->
              <p>数字资源管理系统</p>
              <p>展厅综合控制系统</p>
              <p>客流监测分析系统</p>
              <p>环境监测控制系统</p>
              <p>藏品管理系统</p>
<!--              <p>门户网站</p>-->
<!--              <p>观众管理系统</p>-->
<!--              <p>图书文献管理系统</p>-->
<!--              <p>策展管理系统</p>-->
<!--              <p>讲解员管理系统</p>-->
<!--              <p>志愿者管理系统</p>-->
              <p>数字孪生可视化平台</p>
              <p>智能运营管理系统</p>
              <p>展柜控制系统</p>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="title">
          <h3>
            <span>智慧导览</span>
          </h3>
        </div>
        <div class="reverse-box">
          <img class="box-img" src="../../assets/home/home2.png" alt="">
          <div class="text">
            <h4>智慧导览</h4>
            <div class="content content-box">
              <p>智慧导览租赁系统</p>
              <p>展柜OLED屏</p>
              <p>团队分区讲解系统</p>
              <p>个人导览讲解系统</p>
              <p>设备租赁综合管理系统</p>
              <p>无线团队讲解系统</p>
              <p>智能机器人讲解系统</p>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="title">
          <h3>
            <span>场馆安防</span>
          </h3>
        </div>
        <div class="box">
          <img class="box-img" src="../../assets/home/home3.jpg" alt="">
          <div class="text">
            <h4>场馆安防</h4>
            <div class="content content-box">
              <p>视频监控系统</p>
              <p>出入口控制系统</p>
              <p>入侵防盗报警系统</p>
              <p>展柜安全防护系统</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<style scoped lang="less">
.home {
  width: 100%;
  .home-content {
    width: 100%;
    .container {
      width: 100%;
      background: rgba(0, 0, 0, 0.7);
      &:nth-child(2n) {
        background: rgba(0, 0, 0, 0.9);
      }
      .title {
        padding: 40px 0 30px 0;
        h3 {
          margin: 0;
          font-size: 26px;
          color: #d3b167;
          font-weight: bold;
          line-height: 37px;
          position: relative;
          span {
            position: relative;
          }
          span::before {
            content: url('@/assets/home/line-left.png');
            position: absolute;
            left: -120px;
            top: 0;
          }
          span::after {
            content: url('@/assets/home/line-right.png');
            position: absolute;
            right: -120px;
            top: 0;
          }
        }
        p {
          background: url('@/assets/home/border.png') no-repeat center center;
          background-size: contain;
          line-height: 37px;
          height: 37px;
          color: #fff;
          font-size: 12px;
        }
      }
      .box {
        position: relative;
        color: #ffffff;
        width: 1330px;
        margin: 0 auto;
        text-align: left;
        .box-img {
          width: 800px;
          height: 400px;
          border: 5px solid #595959;
        }
        .box-big-img {
          height: 500px !important;
        }
        .text {
          position: absolute;
          right: 0;
          top: 40px;
          width: 50%;
          background: rgba(57, 57, 57, .85);
          padding: 0 25px 25px 23px;
          h4 {
            line-height: 66px;
            font-weight: bold;
            font-size: 22px;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-bottom: 2px;
            margin-bottom: 19px;
            &::after {
              content: "";
              position: absolute;
              left: 0;
              bottom: 0;
              width: 53px;
              height: 2px;
              background: #d3b167;
            }
          }
          .content {
            overflow: hidden;
            padding: 5px 30px 10px 0;
            font-size: 18px;
            line-height: 2;
          }
          .content-box {
            display: flex;
            flex-wrap: wrap;
            p {
              margin: 10px;
              width: 130px;
              height: 130px;
              background-image: url("@/assets/home/bg2.png");
              background-size: 100% 100%;
              font-size: 14px;
              text-align: center;
            }
          }
          .btn {
            display: inline-block;
            line-height: 30px;
            padding: 0 27px;
            border: 1px solid #d3b167;
            color: #d3b167;
            cursor: pointer;
            font-size: 14px;
          }
        }
      }
      .reverse-box {
        position: relative;
        color: #ffffff;
        width: 1330px;
        margin: 0 auto;
        text-align: left;
        .box-img {
          width: 800px;
          height: 500px;
          border: 5px solid #595959;
          margin-left: 520px;
        }
        //.box-big-img {
        //  height: 500px !important;
        //}
        .text {
          position: absolute;
          left: 0;
          top: 40px;
          width: 50%;
          background: rgba(57, 57, 57, .85);
          padding: 0 25px 25px 23px;

          h4 {
            line-height: 66px;
            font-weight: bold;
            font-size: 22px;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-bottom: 2px;
            margin-bottom: 19px;

            &::after {
              content: "";
              position: absolute;
              left: 0;
              bottom: 0;
              width: 53px;
              height: 2px;
              background: #d3b167;
            }
          }

          .content {
            overflow: hidden;
            padding: 5px 30px 10px 0;
            font-size: 18px;
            line-height: 2;
          }

          .content-box {
            display: flex;
            flex-wrap: wrap;

            p {
              margin: 10px;
              width: 130px;
              height: 130px;
              background-image: url("@/assets/home/bg2.png");
              background-size: 100% 100%;
              font-size: 14px;
              text-align: center;
            }
          }
        }
      }
      .box-two {
        width: 1330px;
        margin: 0 auto;
        background: #595959;
        padding: 20px 0;
        .btn-box {
          display: flex;
          justify-content: center;
          a {
            width: 160px;
            height: 40px;
            line-height: 40px;
            margin: 0 10px 10px;
            border-radius: 20px;
            text-align: center;
            border: 1px solid #d3b167;
            font-size: 14px;
            color: #d3b167;
          }
        }
        .car-box {
          text-align: left;
          //display: flex;
          //flex-wrap: wrap;
          //justify-content: space-around;
          //align-items: flex-start;
          img {
            width: 22%;
            margin: 15px 0 15px 2.4%;
          }
        }
      }
    }
  }
}
</style>
